<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <!-- 添加这一行 -->
<!-- 剩余内容保持不变 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绿能充 - 充电桩</title>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <style>
    :root {
      --primary-color: #00a896;
      --secondary-color: #02c39a;
      --dark-color: #05668d;
      --light-color: #f0f3bd;
      --accent-color: #028090;
      --text-dark: #333;
      --text-light: #f8f9fa;
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Noto Sans SC', sans-serif;
      color: var(--text-dark);
      background-color: #f9f9f9;
      min-height: 100vh;
      display: flex;
    }

    /* 侧边栏样式 */
    .sidebar {
      width: 250px;
      background: linear-gradient(135deg, var(--dark-color) 0%, var(--primary-color) 100%);
      color: white;
      padding: 20px 0;
      height: 100vh;
      position: fixed;
      box-shadow: var(--shadow);
      z-index: 100;
    }

    .sidebar-header {
      padding: 0 20px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      margin-bottom: 20px;
    }

    .sidebar-header .logo {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }

    .sidebar-header .logo-icon {
      width: 40px;
      height: 40px;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      font-size: 18px;
      color: var(--light-color);
    }

    .sidebar-header h3 {
      font-size: 1.2rem;
      font-weight: 500;
      margin: 0;
    }

    .sidebar-header p {
      font-size: 0.8rem;
      opacity: 0.8;
      margin: 0;
    }

    .nav-menu {
      list-style: none;
      padding: 0 15px;
    }

    .nav-item {
      margin-bottom: 5px;
    }

    .nav-link {
      display: flex;
      align-items: center;
      padding: 12px 15px;
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      border-radius: 8px;
      transition: var(--transition);
    }

    .nav-link:hover, .nav-link.active {
      background-color: rgba(255, 255, 255, 0.1);
      color: white;
    }

    .nav-link i {
      margin-right: 10px;
      width: 20px;
      text-align: center;
      font-size: 16px;
    }

    .nav-link .badge {
      margin-left: auto;
      background-color: var(--light-color);
      color: var(--dark-color);
      font-size: 0.7rem;
      padding: 3px 6px;
    }

    .user-profile {
      position: absolute;
      bottom: 20px;
      left: 0;
      width: 100%;
      padding: 0 20px;
    }

    .user-info {
      display: flex;
      align-items: center;
      padding: 10px;
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      cursor: pointer;
      transition: var(--transition);
    }

    .user-info:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }

    .user-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      font-size: 14px;
    }

    .user-name {
      font-size: 0.9rem;
      font-weight: 500;
      margin-bottom: 2px;
    }

    .user-role {
      font-size: 0.7rem;
      opacity: 0.8;
    }

    /* 主内容区样式 */
    .main-content {
      flex: 1;
      margin-left: 250px;
      padding: 30px;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
    }

    .page-title h1 {
      font-size: 1.8rem;
      font-weight: 600;
      color: var(--dark-color);
      margin-bottom: 5px;
    }

    .page-title p {
      color: #777;
      font-size: 0.9rem;
      margin: 0;
    }

    .header-actions {
      display: flex;
      gap: 10px;
    }

    .btn {
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 0.9rem;
      font-weight: 500;
      border: none;
      cursor: pointer;
      transition: var(--transition);
      display: flex;
      align-items: center;
    }

    .btn i {
      margin-right: 6px;
    }

    .btn-primary {
      background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
      color: white;
      box-shadow: 0 4px 15px rgba(0, 168, 150, 0.3);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 168, 150, 0.4);
    }

    .btn-outline {
      background: transparent;
      border: 1px solid #ddd;
      color: #555;
    }

    .btn-outline:hover {
      background-color: #f5f5f5;
    }

    /* 统计卡片样式 */
    .stats-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }

    .stat-card {
      background-color: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: var(--shadow);
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }

    .stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    .stat-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    }

    .stat-card.available-card::after {
      background: linear-gradient(to right, #4caf50, #81c784);
    }

    .stat-card.busy-card::after {
      background: linear-gradient(to right, #ff9800, #ffb74d);
    }

    .stat-card.fast-card::after {
      background: linear-gradient(to right, #028090, #00a896);
    }

    .stat-card.slow-card::after {
      background: linear-gradient(to right, #05668d, #028090);
    }

    .stat-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }

    .stat-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 18px;
    }

    .available-card .stat-icon {
      background: linear-gradient(135deg, #4caf50, #81c784);
    }

    .busy-card .stat-icon {
      background: linear-gradient(135deg, #ff9800, #ffb74d);
    }

    .fast-card .stat-icon {
      background: linear-gradient(135deg, #028090, #00a896);
    }

    .slow-card .stat-icon {
      background: linear-gradient(135deg, #05668d, #028090);
    }

    .stat-title {
      font-size: 0.9rem;
      color: #777;
      font-weight: 500;
    }

    .stat-value {
      font-size: 1.8rem;
      font-weight: 600;
      margin: 10px 0;
      color: var(--dark-color);
    }

    .stat-change {
      font-size: 0.8rem;
      display: flex;
      align-items: center;
    }

    .stat-change.positive {
      color: #4caf50;
    }

    .stat-change.negative {
      color: #f44336;
    }

    /* 充电桩列表样式 */
    .charger-container {
      width: 100%;
    }

    .charger-filter {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      flex-wrap: wrap;
      gap: 10px;
    }

    .filter-search {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .filter-search input {
      padding: 8px 15px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 0.9rem;
      width: 250px;
      max-width: 100%;
    }

    .charger-list {
      background-color: white;
      border-radius: 12px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .charger-table {
      width: 100%;
      border-collapse: collapse;
    }

    .charger-table th,
    .charger-table td {
      padding: 15px;
      text-align: left;
      border-bottom: 1px solid #f0f0f0;
    }

    .charger-table th {
      background-color: #f8f9fa;
      font-weight: 500;
      color: #555;
      font-size: 0.9rem;
    }

    .charger-table tr:hover {
      background-color: #f9f9f9;
    }

    .charger-name {
      font-weight: 500;
      transition: var(--transition);
    }

    .charger-name:hover {
      color: var(--primary-color);
    }

    .charger-tag {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 0.75rem;
      font-weight: 500;
      margin-left: 8px;
    }

    .tag-fast {
      background-color: #e3f2fd;
      color: #1976d2;
    }

    .tag-slow {
      background-color: #e8f5e9;
      color: #2e7d32;
    }

    .charger-status {
      text-align: center;
    }

    .status-available {
      color: #4caf50;
      font-weight: 500;
    }

    .status-busy {
      color: #ff9800;
      font-weight: 500;
    }

    .status-offline {
      color: #f44336;
      font-weight: 500;
    }

    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 30px;
      gap: 8px;
    }

    .page-link {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 4px;
      border: 1px solid #ddd;
      color: #555;
      text-decoration: none;
      transition: var(--transition);
    }

    .page-link:hover, .page-link.active {
      background-color: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
    }

    .page-link.disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* 响应式设计 */
    @media (max-width: 992px) {
      .sidebar {
        width: 70px;
        overflow: hidden;
      }

      .sidebar-header h3,
      .sidebar-header p,
      .nav-link span,
      .user-name,
      .user-role {
        display: none;
      }

      .sidebar-header {
        padding: 15px 10px;
      }

      .nav-link {
        justify-content: center;
        padding: 12px 0;
      }

      .nav-link i {
        margin-right: 0;
        font-size: 18px;
      }

      .main-content {
        margin-left: 70px;
      }
    }

    @media (max-width: 768px) {
      .stats-container {
        grid-template-columns: 1fr 1fr;
      }

      .header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
      }
    }

    @media (max-width: 576px) {
      .stats-container {
        grid-template-columns: 1fr;
      }

      .main-content {
        padding: 20px 15px;
      }
    }
  </style>
</head>
<body>
<!-- 侧边导航栏 -->
<div class="sidebar">
  <div class="sidebar-header">
    <div class="logo">
      <div class="logo-icon">
        <i class="fas fa-charging-station"></i>
      </div>
      <div>
        <h3>绿能充</h3>
        <p>用户面板</p>
      </div>
    </div>
  </div>

  <ul class="nav-menu">
    <li class="nav-item">
      <a href="/user/home" class="nav-link active">
        <i class="fas fa-tachometer-alt"></i>
        <span>仪表盘</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="/user/announcement/list" class="nav-link">
        <i class="fas fa-users"></i>
        <span>公告栏</span>
        <span class="badge">5</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="/user/pile/list" class="nav-link">
        <i class="fas fa-charging-station"></i>
        <span>充电桩</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="/user/map/mapDetail" class="nav-link">
        <i class="fas fa-list-alt"></i>
        <span>地图</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="/user/center/personCenter/${user.id}" class="nav-link">
        <i class="fas fa-exclamation-triangle"></i>
        <span>个人中心</span>
        <span class="badge">3</span>
      </a>
    </li>
  </ul>

  <div class="user-profile">
    <div class="user-info">
      <div class="user-avatar">
        <i class="fas fa-user"></i>
      </div>
      <div>
        <div class="user-name">用户</div>
        <div class="user-role">普通用户</div>
      </div>
    </div>
  </div>
</div>

<!-- 主内容区 -->
<div class="main-content">
  <div class="header">
    <div class="page-title">
      <h1>充电桩</h1>
      <p>查看附近可用充电桩</p>
    </div>
    <div class="header-actions">
      <button class="btn btn-primary">
        <i class="fas fa-refresh"></i> 刷新
      </button>
      <button class="btn btn-outline">
        <i class="fas fa-filter"></i> 筛选
      </button>
    </div>
  </div>

  <!-- 统计卡片 -->
  <div class="stats-container">
    <div class="stat-card available-card">
      <div class="stat-header">
        <div class="stat-title">可用充电桩</div>
        <div class="stat-icon">
          <i class="fas fa-plug"></i>
        </div>
      </div>
      <div class="stat-value">${chargingPile.status}</div>
      <div class="stat-change positive">
        <i class="fas fa-arrow-up"></i> 12% 较昨日
      </div>
    </div>

    <div class="stat-card busy-card">
      <div class="stat-header">
        <div class="stat-title">使用中充电桩</div>
        <div class="stat-icon">
          <i class="fas fa-bolt"></i>
        </div>
      </div>
      <div class="stat-value">${chargingPile.status}</div>
      <div class="stat-change negative">
        <i class="fas fa-arrow-down"></i> 8% 较昨日
      </div>
    </div>

    <div class="stat-card fast-card">
      <div class="stat-header">
        <div class="stat-title">快充充电桩</div>
        <div class="stat-icon">
          <i class="fas fa-bolt"></i>
        </div>
      </div>
      <div class="stat-value">${chargingPile.type}</div>
      <div class="stat-change positive">
        <i class="fas fa-arrow-up"></i> 5% 较昨日
      </div>
    </div>

    <div class="stat-card slow-card">
      <div class="stat-header">
        <div class="stat-title">慢充充电桩</div>
        <div class="stat-icon">
          <i class="fas fa-plug"></i>
        </div>
      </div>
      <div class="stat-value">${chargingPile.type}</div>
      <div class="stat-change neutral">
        <i class="fas fa-minus"></i> 持平 较昨日
      </div>
    </div>
  </div>

  <!-- 充电桩列表 -->
  <div class="charger-container">
    <div class="charger-filter">
      <div class="filter-search">
        <input type="text" placeholder="搜索充电桩...">
        <button class="btn btn-primary">
          <i class="fas fa-search"></i> 搜索
        </button>
      </div>
      <div class="filter-options">
        <select class="btn btn-outline">
          <option>全部类型</option>
          <option>快充</option>
          <option>慢充</option>
        </select>
        <select class="btn btn-outline">
          <option>全部状态</option>
          <option>可用</option>
          <option>使用中</option>
          <option>离线</option>
        </select>
      </div>
    </div>

    <div class="charger-list">
      <table class="charger-table">
        <thead>
        <tr>
          <th>充电桩名称</th>
          <th>位置</th>
          <th>类型</th>
          <th>状态</th>
          <th>价格(元/度)</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:if test="${not empty chargingPileList}">
          <c:forEach items="${chargingPileList}" var="chargingPile">
            <tr class="charger-row">
              <td>
                <a href="/user/pile/detail/${chargingPile.id}" class="charger-name">
                    ${chargingPile.name}
                </a>
                <c:if test="${chargingPile.type == 'AC'}">
                  <span class="charger-tag tag-fast">快充</span>
                </c:if>
                <c:if test="${chargingPile.type == 'DC'}">
                  <span class="charger-tag tag-slow">慢充</span>
                </c:if>
              </td>
              <td>${chargingPile.location}</td>
              <td>
                <c:choose>
                  <c:when test="${chargingPile.type == 'AC'}">快充</c:when>
                  <c:otherwise>慢充</c:otherwise>
                </c:choose>
              </td>
              <td class="charger-status">
                <c:choose>
                  <c:when test="${chargingPile.status == 'AVAILABLE'}">
                    <span class="status-available">可用</span>
                  </c:when>
                  <c:when test="${chargingPile.status == 'CHARGING'}">
                    <span class="status-busy">使用中</span>
                  </c:when>
                  <c:otherwise>
                    <span class="status-offline">离线</span>
                  </c:otherwise>
                </c:choose>
              </td>
              <td>${chargingPile.price}</td>
              <td>
                <a href="/user/pile/detail/${chargingPile.id}" class="btn btn-primary btn-sm">
                  查看详情
                </a>
              </td>
            </tr>
          </c:forEach>
        </c:if>
        <c:if test="${empty chargingPileList}">
          <tr>
            <td colspan="6" style="text-align: center; padding: 30px;">暂无充电桩数据</td>
          </tr>
        </c:if>
        </tbody>
      </table>
    </div>

    <!-- 分页 -->

    <div class="pagination" id="pagination">
      <a href="#" class="page-link disabled" data-page="prev">
        <i class="fas fa-angle-left"></i>
      </a>
      <a href="#" class="page-link active" data-page="1">1</a>
      <a href="#" class="page-link" data-page="2">2</a>
      <a href="#" class="page-link" data-page="3">3</a>
      <a href="#" class="page-link" data-page="4">4</a>
      <a href="#" class="page-link" data-page="5">5</a>
      <a href="#" class="page-link" data-page="next">
        <i class="fas fa-angle-right"></i>
      </a>
    </div>
  </div>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    // 获取元素引用
    const chargerRows = document.querySelectorAll('.charger-row');
    const chargerTableBody = document.querySelector('.charger-table tbody');
    const searchInput = document.querySelector('.filter-search input');
    const searchBtn = document.querySelector('.filter-search .btn');
    const typeFilter = document.querySelector('.filter-options select:first-child');
    const statusFilter = document.querySelector('.filter-options select:last-child');
    const refreshBtn = document.querySelector('.header-actions .btn-primary');
    const filterBtn = document.querySelector('.header-actions .btn-outline');
    const pagination = document.getElementById('pagination');

    // 每页显示的记录数
    const pageSize = 5;
    let currentPage = 1;
    let filteredChargers = Array.from(chargerRows);

    // 为每行添加数据属性，方便筛选
    chargerRows.forEach(row => {
      const type = row.querySelector('td:nth-child(3)').textContent.trim() === '快充' ? 'DC' : 'AC';
      const status = row.querySelector('.charger-status span').className.replace('status-', '').toUpperCase();
      row.setAttribute('data-type', type);
      row.setAttribute('data-status', status);
    });

    // 刷新按钮点击事件
    if (refreshBtn) {
      refreshBtn.addEventListener('click', function () {
        // 显示加载动画
        this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 刷新中...';
        this.disabled = true;

        // 模拟刷新数据
        setTimeout(() => {
          location.reload();
        }, 1000);
      });
    }

    // 搜索按钮点击事件
    if (searchBtn) {
      searchBtn.addEventListener('click', filterChargers);
    }

    // 搜索输入框回车事件
    if (searchInput) {
      searchInput.addEventListener('keyup', function (event) {
        if (event.key === 'Enter') {
          filterChargers();
        }
      });
    }

    // 类型筛选变化事件
    if (typeFilter) {
      typeFilter.addEventListener('change', filterChargers);
    }

    // 状态筛选变化事件
    if (statusFilter) {
      statusFilter.addEventListener('change', filterChargers);
    }

    // 筛选充电桩函数
    function filterChargers() {
      const searchTerm = searchInput.value.toLowerCase();
      const type = typeFilter.value;
      const status = statusFilter.value;

      filteredChargers = Array.from(chargerRows).filter(row => {
        const name = row.querySelector('.charger-name').textContent.toLowerCase();
        const location = row.querySelector('td:nth-child(2)').textContent.toLowerCase();
        const rowType = row.getAttribute('data-type');
        const rowStatus = row.getAttribute('data-status');

        const matchesSearch = name.includes(searchTerm) || location.includes(searchTerm);
        const matchesType = type === '全部类型' ||
                (type === '快充' && rowType === 'DC') ||
                (type === '慢充' && rowType === 'AC');
        const matchesStatus = status === '全部状态' ||
                (status === '可用' && rowStatus === 'AVAILABLE') ||
                (status === '使用中' && rowStatus === 'CHARGING') ||
                (status === '离线' && rowStatus === 'OFFLINE');

        return matchesSearch && matchesType && matchesStatus;
      });

      // 重置到第一页
      currentPage = 1;

      // 更新表格显示
      renderChargerTable();

      // 更新分页
      updatePagination();

      // 更新统计信息
      updateStats();
    }

    // 更新统计信息函数
    function updateStats() {
      const availableCard = document.querySelector('.available-card .stat-value');
      const busyCard = document.querySelector('.busy-card .stat-value');
      const fastCard = document.querySelector('.fast-card .stat-value');
      const slowCard = document.querySelector('.slow-card .stat-value');

      if (availableCard && busyCard && fastCard && slowCard) {
        const available = filteredChargers.filter(row => row.getAttribute('data-status') === 'AVAILABLE').length;
        const busy = filteredChargers.filter(row => row.getAttribute('data-status') === 'CHARGING').length;
        const fast = filteredChargers.filter(row => row.getAttribute('data-type') === 'DC').length;
        const slow = filteredChargers.filter(row => row.getAttribute('data-type') === 'AC').length;

        availableCard.textContent = available;
        busyCard.textContent = busy;
        fastCard.textContent = fast;
        slowCard.textContent = slow;
      }
    }

    // 渲染充电桩表格函数
    function renderChargerTable() {
      // 清空表格内容
      while (chargerTableBody.firstChild) {
        chargerTableBody.removeChild(chargerTableBody.firstChild);
      }

      // 如果没有数据，显示空状态
      if (filteredChargers.length === 0) {
        const emptyRow = document.createElement('tr');
        emptyRow.innerHTML = '<td colspan="6" style="text-align: center; padding: 30px;">没有找到匹配的充电桩</td>';
        chargerTableBody.appendChild(emptyRow);
        return;
      }

      // 计算当前页的数据范围
      const startIndex = (currentPage - 1) * pageSize;
      const endIndex = Math.min(startIndex + pageSize, filteredChargers.length);

      // 添加当前页的数据行
      for (let i = startIndex; i < endIndex; i++) {
        chargerTableBody.appendChild(filteredChargers[i].cloneNode(true));
      }
    }

    // 更新分页函数
    function updatePagination() {
      if (!pagination) return;

      const totalPages = Math.ceil(filteredChargers.length / pageSize);

      // 清空现有分页
      pagination.innerHTML = '';

      // 添加上一页按钮
      const prevBtn = document.createElement('a');
      prevBtn.href = '#';
      prevBtn.className = `page-link ${currentPage == 1 ? 'disabled' : ''}`;
      prevBtn.setAttribute('data-page', 'prev');
      prevBtn.innerHTML = '<i class="fas fa-angle-left"></i>';
      prevBtn.addEventListener('click', function (e) {
        e.preventDefault();
        if (currentPage > 1) {
          currentPage--;
          renderChargerTable();
          updatePagination();
        }
      });
      pagination.appendChild(prevBtn);

      // 添加页码按钮
      const maxVisiblePages = 5;
      let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
      let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);

      // 调整起始页码，确保显示完整的maxVisiblePages个页码
      if (endPage - startPage + 1 < maxVisiblePages) {
        startPage = Math.max(1, endPage - maxVisiblePages + 1);
      }

      // 添加第一页和省略号（如果需要）
      if (startPage > 1) {
        addPageLink(1);
        if (startPage > 2) {
          addEllipsis();
        }
      }

      // 添加页码
      for (let i = startPage; i <= endPage; i++) {
        addPageLink(i);
      }

      // 添加最后一页和省略号（如果需要）
      if (endPage < totalPages) {
        if (endPage < totalPages - 1) {
          addEllipsis();
        }
        addPageLink(totalPages);
      }

      // 添加下一页按钮
      const nextBtn = document.createElement('a');
      nextBtn.href = '#';
      nextBtn.className = `page-link ${currentPage == totalPages ? 'disabled' : ''}`;
      nextBtn.setAttribute('data-page', 'next');
      nextBtn.innerHTML = '<i class="fas fa-angle-right"></i>';
      nextBtn.addEventListener('click', function (e) {
        e.preventDefault();
        if (currentPage < totalPages) {
          currentPage++;
          renderChargerTable();
          updatePagination();
        }
      });
      pagination.appendChild(nextBtn);

      // 添加页码链接的辅助函数
      function addPageLink(pageNum) {
        const pageLink = document.createElement('a');
        pageLink.href = '#';
        pageLink.className = `page-link ${currentPage == pageNum ? 'active' : ''}`;
        pageLink.setAttribute('data-page', pageNum);
        pageLink.textContent = pageNum;
        pageLink.addEventListener('click', function (e) {
          e.preventDefault();
          currentPage = pageNum;
          renderChargerTable();
          updatePagination();
        });
        pagination.appendChild(pageLink);
      }

      // 添加省略号的辅助函数
      function addEllipsis() {
        const ellipsis = document.createElement('span');
        ellipsis.className = 'page-link disabled';
        ellipsis.textContent = '...';
        pagination.appendChild(ellipsis);
      }
    }

    // 初始化页面
    updateStats();
    updatePagination();
  });
</script>
</body>
</html>